import React, {useEffect, useRef, useState} from 'react';
import {StyleSheet, View, Button, Animated} from 'react-native';

const simple_animate9_1 = () => {
  const marginLeft = useRef(new Animated.Value(0)).current;
  const [inc, setinc] = useState(50);

  useEffect(() => {
    console.log(inc, '----effect-inc');
    Animated.timing(marginLeft, {
      toValue: inc,
      duration: 500,
      useNativeDriver: false,
    }).start();
    return () => {};
  }, [inc]);
  console.log(inc, '--外面');

  const press = () => {
    setinc(inc + 50); // 驱动数据所带来的渲染，然后渲染之前执行一下副作用
    console.log(inc, '-----inc');
    // setinc(now => {
    //   return now + 50;
    // });
  };
  return (
    <View style={styles.root}>
      <Button title="按钮" onPress={press} />

      <Animated.View style={[styles.view, {marginLeft: marginLeft}]} />
    </View>
  );
};

const styles = StyleSheet.create({
  root: {
    width: '100%',
    height: 'auto',
    backgroundColor: 'white',
  },
  view: {
    width: 100,
    height: 100,
    backgroundColor: '#3050ff',
    marginTop: 20,
  },
});
export default simple_animate9_1;
